<script lang="ts" setup>
import { useConsultOrderDetail } from '@/hooks';

// 获取订单详情
const props = defineProps<{
  orderId: string
}>()
const { PersonOrderDetail } = useConsultOrderDetail(props.orderId)
</script>

<template>
  <scroll-page background-color="#f6f6f6">
    <view class="consult-page">
      <view class="page-header">
        <!-- 订单状态 -->
        <view class="order-status">
          <view class="label">
            <text class="title">图文问诊 {{PersonOrderDetail?.payment}}元</text>
            <text class="tips">
              取消/退款进度：您的订单已取消，诊金将在1-7个工作日内退回原支付账户。
            </text>
          </view>
          <text class="status">{{PersonOrderDetail?.statusValue}}</text>
        </view>
        <!--  医生信息 -->
        <view class="consult-doctor">
          <text class="lable">服务医生信息</text>
          <view class="doctor">
            <image
              class="doctor-avatar"
              src="/static/uploads/doctor-avatar.jpg"
            />
            <view class="doctor-info">
              <view class="meta">
                <text class="name">王医生</text>
                <text class="title">内分泌科 | 主任医师</text>
              </view>
              <view class="meta">
                <text class="tag">三甲</text>
                <text class="hospital">积水潭医院</text>
              </view>
            </view>
            <view class="arrow">
              <uni-icons size="18" color="#C3C3C5" type="forward" />
            </view>
          </view>
        </view>
      </view>
      <!-- 患者信息 -->
      <view class="consult-patient">
        <view class="list-title">患者资料</view>
        <uni-list :border="false">
          <uni-list-item title="患者信息" 
          :right-text="PersonOrderDetail?.patientInfo.name + ' | ' + PersonOrderDetail?.patientInfo?.genderValue + ' | ' + PersonOrderDetail?.patientInfo?.age + '岁'" />
          <uni-list-item title="病情描述" :note="PersonOrderDetail?.illnessDesc" />
        </uni-list>
      </view>

      <!-- 订单信息 -->
      <view class="order-info">
        <view class="list-title">订单信息</view>
        <uni-list :border="false">
          <uni-list-item title="订单编号" :right-text="PersonOrderDetail?.orderNo" />
          <uni-list-item title="创建时间" :right-text="PersonOrderDetail?.createTime" />
          <uni-list-item title="取消时间" :right-text="PersonOrderDetail?.cancelTime" />
          <uni-list-item title="应付款" :right-text="PersonOrderDetail?.payment.toString() + '元'" />
          <uni-list-item title="优惠券">
            <template #footer>
              <view class="uni-list-text-red">-¥{{PersonOrderDetail?.couponDeduction}}</view>
            </template>
          </uni-list-item>
          <uni-list-item title="积分抵扣">
            <template #footer>
              <view class="uni-list-text-red">-¥{{PersonOrderDetail?.pointDeduction}}</view>
            </template>
          </uni-list-item>
          <uni-list-item title="实付款">
            <template #footer>
              <view class="uni-list-text-red">¥{{PersonOrderDetail?.actualPayment}}</view>
            </template>
          </uni-list-item>
          <!-- 订单状态1待支付2待接诊3咨询中4已完成5已取消/药品订单10待支付11待发货12待收货13已完成14已取消 -->
          <template v-if="PersonOrderDetail?.status === 4 || 12 || 13 || 14">
            <uni-list-item title="支付时间" :right-text="PersonOrderDetail?.createTime" />
            <uni-list-item title="支付方式" :right-text="PersonOrderDetail?.paymentMethod === 1 ? '微信支付' : '支付宝'" />
          </template>
        </uni-list>
      </view>
      <!-- 倒计时通知栏 -->
      <view class="notice-bar" v-if="PersonOrderDetail?.status === 1 && PersonOrderDetail?.countdown !== -1">
        <uni-notice-bar :text="`请在 ${Math.floor(PersonOrderDetail?.countdown! / 60)}:${PersonOrderDetail?.countdown! % 60} 内完成支付，超时订单将取消`" />
      </view>

      <!-- 底部 -->
      <view class="toolbar">
        <template v-if="PersonOrderDetail?.status === 1 || 5">
          <view class="total-amount">
            需付款: <text class="number">¥{{PersonOrderDetail?.actualPayment}}</text>
          </view>
          <view class="buttons">
            <button class="uni-button minor" >取消问诊</button>
            <button class="uni-button">立即支付</button>
          </view>
        </template>
        <template v-else-if="PersonOrderDetail?.status === 4">
          <view class="buttons">
            <view class="delete-botton">
              <uni-icons size="24" color="#848484" type="trash" />
              <text>删除订单</text>
            </view>
            <button class="uni-button">再次购买</button>
          </view>
        </template>
      </view>
    </view>
  </scroll-page>
</template>

<style lang="scss">
  @import './index.scss';
</style>